<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>web聊天</title>
    <script>
        function connect(){
            let ws = new WebSocket("ws://localhost:8888/ws");
            const recvMsg =document.getElementById("recv-msg")
            const sendMsg = document.getElementById("send-msg")
            const sendBtn = document.getElementById("sendBtn")

            ws.onopen = function(event) {
                ws.onmessage = function(event) {
                    recvMsg.value = event.data;
                };
            };


            sendBtn.onclick = function() {
                if (sendMsg.value.trim() !== ""){
                    ws.send(sendMsg.value.trim());
                }
            };
        }


    </script>
</head>

<body>
    <textarea id="recv-msg"></textarea>
    <input type="text" id="send-msg"></input>
    <button id="sendBtn">发送</button>
    <button id="btn" onclick=connect()>连接</button>
</body>


</html>